{% extends "base.html" %}

{% block title %}Bugs{% endblock %}

{% block navbar %}
<section class="content-header">
    <h1>各项目完成比例图</h1>
    <ol class="breadcrumb">
        <li><i class="fa fa-dashboard"></i> 当前位置</li>
        <li class="active">Bug</li>
    </ol>
</section>
{% endblock %}

{% block content %}
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1200px;height:500px;text-align: center" ></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            silent: true,
            series: {
                radius: ['15%', '80%'],
                type: 'sunburst',
                sort: null,
                highlightPolicy: 'ancestor',
                data: [{
                    value: 8,
                    children: [{
                        value: 4,
                        children: [{
                            value: 2
                        }, {
                            value: 1
                        }, {
                            value: 1
                        }, {
                            value: 0.5
                        }]
                    }, {
                        value: 2
                    }]
                }, {
                    value: 4,
                    children: [{
                        children: [{
                            value: 2
                        }]
                    }]
                }, {
                    value: 4,
                    children: [{
                        children: [{
                            value: 2
                        }]
                    }]
                }, {
                    value: 3,
                    children: [{
                        children: [{
                            value: 1
                        }]
                    }]
                }],
                label: {
                    color: '#fff',
                    textBorderColor: '#666',
                    textBorderWidth: 2,
                    borderColor: '#999',
                    borderWidth: 1,
                    formatter: function (param) {
                        var depth = param.treePathInfo.length;
                        if (depth === 2) {
                            return 'radial';
                        }
                        else if (depth === 3) {
                            return 'tangential';
                        }
                        else if (depth === 4) {
                            return '0';
                        }
                    }
                },
                levels: [{}, {
                    itemStyle: {
                        color: 'red'
                    },
                    label: {
                        rotate: 'radial'
                    }
                }, {
                    itemStyle: {
                        color: 'orange'
                    },
                    label: {
                        rotate: 'tangential'
                    }
                }, {
                    itemStyle: {
                        color: 'yellow'
                    },
                    label: {
                        rotate: 0
                    }
                }]
            }
        };
       myChart.setOption(option);
    </script>
{% endblock %}


{% block scripts %}

{% endblock %}

